<?xml version='1.0' encoding='ISO-8859-1' ?>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" 
	xmlns:h="http://java.sun.com/jsf/html" 
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:c="http://java.sun.com/jsp/jstl/core" 
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:fn="http://java.sun.com/jsp/jstl/functions"
	xmlns:p="http://primefaces.org/ui">

<ui:decorate template="/template/template.xhtml">
	<ui:define name="content">

		<div class="content">

			<div class="panel panel-default">
				<div class="panel-body">
				
					<!-- Lista de palavras -->
					<div id="box-palavras" class="col-md-5 well">
						<ui:repeat value="#{lexicoBean.palavraList.toArray()}" var="palavra">
							<span class="col-md-4"> 
								<h:form>
								    #{palavra}
								    <h:commandLink class="close" aria-hidden="true" action="#{lexicoBean.removePalavra(palavra)}" value="X" title="Remover"/>
								</h:form>
							</span>
						</ui:repeat>
					</div>

					<!-- Cadastrar Palavra -->
					<div>
						<h:form class="form-inline" role="form">
							<div class="form-group col-md-6">
								<h:inputText id="inserePalavra" value="#{lexicoBean.palavra}" class="form-control col-lg-2" />
								<p:watermark for="inserePalavra" value="Adicionar uma Palavra" />
							</div>
							<h:commandButton action="#{lexicoBean.inserePalavra}" class="btn btn-primary col-md-1" value="Adicionar" />
						</h:form>
					</div>

					<br />
					<br />

					<!-- Verificar Palavra -->
					<div>
						<h:form class="form-inline" role="form">
							<div class="form-group col-md-6">
								<h:inputText id="verificaPalavra" autocomplete="off" value="#{lexicoBean.palavra}" styleClass="form-control col-lg-2" onkeyup="$('.mensagens').hide(); if(event.keyCode==32) {$('.verify-btn').click()}">
									<p:ajax event="keyup" update="state" listener="#{lexicoBean.geraEstadoAtual}" oncomplete="changeState()" />
								</h:inputText>
								<p:watermark for="verificaPalavra" value="Verificar uma Palavra" />
							</div>
							<h:commandButton action="#{lexicoBean.verificaPalavra}" class="verify-btn btn btn-primary col-md-1 pull-right"	value="Verificar" />
							<h:outputText styleClass="state hidden" id="state" value="#{lexicoBean.estadoAtual}" />
							
							<!-- Mensagens -->
							<div class="mensagens col-md-7 pull-left">
								<h:messages id="mensagem" class="mensagens alert"/>
							</div>
						</h:form>
					</div>
				</div>
			</div>

			<br />

			<!-- Monta a Tabela -->
			<div>
				<table class="table">
					<thead>
						<tr>
							<th></th>
							<ui:repeat var="letra" value="#{TabelaBean.alfabeto}">
								<th>#{letra}</th>
							</ui:repeat>
						</tr>
					</thead>
					<tbody>
						<!-- for que pega os indices das linhas -->
						<ui:repeat var="linha" value="#{lexicoBean.getLinhas()}">
							<tr class="row#{fn:replace(linha, '[*]', '')}">
								<td>#{linha}</td>
								<!-- for que pega os valores das colunas -->
								<ui:repeat var="coluna" value="#{lexicoBean.getColunas(linha)}">
									<td>#{coluna}</td>
								</ui:repeat>
							</tr>
						</ui:repeat>
					</tbody>
				</table>
			</div>

		</div>
		<script>
			changeState()
			setMessageStyle()
		</script>
	</ui:define>
</ui:decorate>

</html>